import React, { Component, PropTypes } from 'react'
import { Modal, Picker, List, InputItem, Icon } from 'antd-mobile'
import { createForm } from 'rc-form'
import { NavHeader } from '../common'
import { myFetch } from '../utils'

class AdjunctionBankcard extends Component {
  constructor() {
    super()
    this.adjunction = this.adjunction.bind(this)
    this.fetchBankList = this.fetchBankList.bind(this)
    this.state = {
      bankList: [],
    }
  }
  render() {
    const { visible, onClose, form: { getFieldProps } } = this.props
    const { bankList } = this.state
    return (
      <Modal
        visible={visible}
        closable={false}
        animated={false}
        className={`rt-adjunction-bankcard-modal`}
      >
        <NavHeader title="银行卡" onClick={onClose} />
        <div className={`cm-hint-message-box`}>
          <span>银行卡：3张</span>
          <span className={`-rule`}>添加规则</span>
        </div>

        <div className={`cm-scrollable-container`}>
          {/*<div className={`cm-picker-wrapper`}>
            <Picker
              data={data}
              cols={1}
              extra="选择会员单位"
            >
              <List.Item
                arrow="down"
              />
            </Picker>
          </div>*/}

          <Picker
            data={bankList}
            cols={1}
            extra="选择银行"
            {...getFieldProps('bankArr')}
            >
            <List.Item
              className={`cm-picker-box`}
              onClick={this.fetchBankList}
              >
              <Icon type="caret-down" />
            </List.Item>
          </Picker>

          <InputItem
            placeholder="输入借记卡卡号"
            className={`cm-input-item`}
          />

          <InputItem
            placeholder="输入持卡人姓名"
            className={`cm-input-item`}
          />

          <InputItem
            placeholder="输入手机号码"
            className={`cm-input-item`}
          />

          <div className={`cm-captcha-box`}>
            <InputItem
              className={`cm-input-item`}
              placeholder="请输入收到的验证码"
              {...getFieldProps('captcha', {
                initialValue: '',
              })}
            />
            <div className={`cm-cpatch-btn`}>
              获取验证码
            </div>
          </div>

          <div className={`cm-main-button`} onClick={this.adjunction}>添 加</div>
        </div>
      </Modal>
    )
  }
  adjunction() {
    console.log('todo')
  }
  fetchBankList() {
    // myFetch(`/infos/bank/getlist`)
    myFetch(`http://localhost:9955/statics/mock/bank-list.json`)
      .then(rs => {
        if (rs && rs.BankList && rs.BankList.length > 0) {
          const arr = rs.BankList
          const dataArr = []
          arr.forEach(val => {
            const o = {}
            o.value = val.Name
            o.label = val.Name
            dataArr.push(o)
          })
          this.setState({
            bankList: dataArr,
          })
        }
      })
  }
}

AdjunctionBankcard.propTypes = {
  visible: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
}

export default createForm()(AdjunctionBankcard)